<template>
  <page-header-wrapper :title="false">
    <a-row :gutter="20">
      <a-col :span="14">
        <a-card :loading="loading" title="编辑业务基本信息">
          <template slot="extra">
            <a-button size="small" type="primary" @click="saveEdit">保存更改</a-button>
          </template>
          <a-form-model
            ref="businessForm"
            :model="businessForm"
            :rules="businessRules"
          >
            <a-form-model-item label="业务类别">
              <a-select
                v-model="businessForm.category"
                placeholder="选择业务类别"
              >
                <a-select-option v-for="(item,index) in categoryOpts" :key="index" :value="index">{{item}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="组别">
              <a-select
                v-model="businessForm.cat_group"
                placeholder="选择组别"
              >
                <a-select-option v-for="(item,index) in groupOpts" :key="index" :value="index">{{item}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="业务名称">
              <a-input v-model="businessForm.name" type="text" />
            </a-form-model-item>
            <a-form-model-item label="业务描述">
              <a-textarea :rows="3" v-model="businessForm.name_desc" type="text" />
            </a-form-model-item>
            <a-form-model-item label="基础官费">
              <a-input v-model="businessForm.official_fee" type="text" />
            </a-form-model-item>
            <a-form-model-item label="大客户官费">
              <a-input v-model="businessForm.vip_official_fee" type="text" />
            </a-form-model-item>
            <a-form-model-item label="大客户建议报价下限">
              <a-input v-model="businessForm.vip_offer_section_lft" type="text" />
            </a-form-model-item>
            <a-form-model-item label="建议报价下限">
              <a-input v-model="businessForm.offer_section_lft" type="text" />
            </a-form-model-item>
            <a-form-model-item label="建议报价上限">
              <a-input v-model="businessForm.offer_section_rgt" type="text" />
            </a-form-model-item>
            <a-form-model-item label="申请周期">
              <a-input v-model="businessForm.register_period" type="text" />
            </a-form-model-item>
            <a-form-model-item label="回执时间">
              <a-input v-model="businessForm.receipt_time" type="text" />
            </a-form-model-item>
            <a-form-model-item label="有效期">
              <a-input v-model="businessForm.period_of_validity" type="text" />
            </a-form-model-item>
            <a-form-model-item label="业务折算LOGO数">
              <a-input type="text" v-model="businessForm.converted_logos_num" />
            </a-form-model-item>
            <a-form-model-item label="业务材料备注说明">
              <quill-editor :value="businessForm.note" @change="onChange"></quill-editor>
            </a-form-model-item>
            <a-form-model-item label="是否隐藏">
              <a-radio-group v-model="businessForm.hide">
                <a-radio :value="1">是</a-radio>
                <a-radio :value="0">否</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="是否需要办理执照业务">
              <a-radio-group v-model="businessForm.is_license">
                <a-radio :value="1">是</a-radio>
                <a-radio :value="0">否</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="排序">
              <a-input type="text" v-model="businessForm.sort" placeholder="请输入排序" />
            </a-form-model-item>
            <a-form-model-item label="可领取此业务的角色">
              <a-select
                :default-value="defaultRole"
                v-model="defaultRole"
                mode="multiple"
                placeholder="选择可领取此业务的角色"
              >
                <a-select-option v-for="(item,index) in roleOpts" :key="index" :value="index">{{index}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-form-model>
        </a-card>
      </a-col>
      <a-col :span="10">
        <a-card :loading="loading" title="编辑业务所含材料">
          <template slot="extra">
            <a-button size="small" type="primary" icon="plus" @click="onMat('')">添加所需材料</a-button>
          </template>
          <s-table
            bordered
            ref="matTable"
            size="middle"
            :row-key="(record) => record.mat_id"
            :columns="matColumns"
            :data="matData"
          >
            <template slot="action" slot-scope="text,record">
              <a-button size="small" type="link" icon="edit" @click="onMat(record.mat_id)">编辑</a-button>
              <a-button size="small" type="link" icon="delete" @click="delMat(record.mat_id)">删除</a-button>
            </template>
          </s-table>
        </a-card>
        <a-card :loading="loading" style="margin-top:20px" title="编辑业务官方状态">
          <template slot="extra">
            <a-button size="small" type="primary" icon="plus" @click="onState('')">添加官方状态</a-button>
          </template>
          <s-table
            bordered
            ref="stateTable"
            size="middle"
            :row-key="(record) => record.state_id"
            :columns="stateColumns"
            :data="stateData"
          >
            <template slot="action" slot-scope="text,record">
              <a-button size="small" type="link" icon="edit" @click="onState(record.state_id)">编辑</a-button>
              <a-button size="small" type="link" icon="delete" @click="delState(record.state_id)">删除</a-button>
            </template>
          </s-table>
        </a-card>
      </a-col>
    </a-row>
    <a-modal
      title="添加/编辑所需材料"
      v-model="matVisible"
      @ok="onSubmitEdit"
    >
      <a-form-model
        ref="matForm"
        :model="matForm"
        :rules="matRules"
      >
        <a-form-model-item label="材料名称">
          <a-input v-model="matForm.mat_name" type="text" />
        </a-form-model-item>
        <a-form-model-item label="关联系统预定字段">
          <a-select
            v-model="matForm.relate_field"
            placeholder="选择业务类别"
          >
            <a-select-option v-for="(item,index) in reserveFieldsOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="材料说明">
          <a-textarea v-model="matForm.desc" :rows="3" />
        </a-form-model-item>
        <a-form-model-item label="材料类型">
          <a-select
            v-model="matForm.type"
            placeholder="选择业务类别"
          >
            <a-select-option v-for="(item,index) in typeOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="可选项">
          <a-textarea v-model="matForm.items" :rows="4" />
        </a-form-model-item>
        <a-form-model-item label="是否必填">
          <a-radio-group v-model="matForm.required">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="是否隐藏">
          <a-radio-group v-model="matForm.hide">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="排序">
          <a-input v-model="matForm.sort" placeholder="输入排序" type="text" />
        </a-form-model-item>
        <a-form-model-item label="示例类型">
          <a-select
            v-model="matForm.example_type"
            placeholder="选择业务类别"
          >
            <a-select-option v-for="(item,index) in exampleTypeOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="示例名称">
          <a-input v-model="matForm.example_content" type="text" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal
      title="添加/编辑官方状态"
      v-model="stateVisible"
      @ok="onSubmitState"
    >
      <a-form-model
        ref="matForm"
        :model="stateForm"
        :rules="stateRules"
      >
        <a-form-model-item label="状态名称">
          <a-input v-model="stateForm.name" type="text" />
        </a-form-model-item>
        <a-form-model-item label="是否隐藏">
          <a-radio-group v-model="stateForm.is_hide">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="排序">
          <a-input v-model="stateForm.sort" type="text" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import QuillEditor from '@/components/Editor/QuillEditor'
import { STable } from '@/components'
import {
  delMat,
  delState,
  getEditDesign,
  getEditMat,
  getEditState,
  getMatList,
  getStateList, postDesignBusiness,
  postEditMat, postEditState
} from '@/api/business'
import businessColumns from '@/columns/business'
export default {
  components: {
    STable,
    QuillEditor
  },
  name: 'DesignBusinessEdit',
  data () {
    return {
      loading: false,
      categoryOpts: {},
      groupOpts: {},
      businessForm: {},
      businessRules: {},
      roleOpts: {},
      defaultRole: [],
      matVisible: false,
      matForm: {},
      matRules: {},
      matColumns: businessColumns.mat_columns,
      matData: parameters => {
        return getMatList(Object.assign(parameters, this.queryParam)).then(res => {
          return res.result
        })
      },
      stateForm: {},
      stateRules: {},
      stateVisible: false,
      stateColumns: businessColumns.state_columns,
      stateData: parameters => {
        return getStateList(Object.assign(parameters, this.queryParam)).then(res => {
          return res.result
        })
      },
      queryParam: {},
      typeOpts: {},
      exampleTypeOpts: {},
      reserveFieldsOpts: {}
    }
  },
  activated () {
    this.getEdit(this.$route.params.id)
    this.queryParam['filter[business_id]'] = this.$route.params.id
  },
  methods: {
    getEdit (id) {
      const app = this
      app.loading = true
      getEditDesign(id).then(res => {
        const info = res.result
        if (res.status === 0) {
          app.businessForm = info.data
          app.roleOpts = info.role_opts
          app.defaultRole = info.role
          app.categoryOpts = info.categoryOpts
          app.groupOpts = info.category20Opts
          app.loading = false
        } else {
          app.$warning({
            title: res.msg
          })
          app.loading = false
        }
      })
    },
    onChange (html) {
      this.businessForm.notes = html
    },
    onMat (id) {
      const app = this
      const data = {}
      data['business_id'] = app.$route.params.id
      data['mat_id'] = id
      getEditMat(data).then(res => {
        app.matForm = res.result.data
        app.typeOpts = res.result.typeOpts
        app.exampleTypeOpts = res.result.exampleTypeOpts
        app.reserveFieldsOpts = res.result.reserveFieldsOpts
        app.matForm['business_id'] = data['business_id']
        app.matForm['mat_id'] = data['mat_id']
        this.matVisible = true
      })
    },
    onSubmitEdit () {
      const app = this
      const form = app.matForm
      const data = {}
      for (const k in form) {
        data['mat[' + k + ']'] = form[k]
      }
      postEditMat(form['business_id'], form['mat_id'], data).then(res => {
        if (res.status === 0) {
          app.matVisible = false
          app.$refs.matTable.refresh(true)
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    },
    onState (id) {
      const app = this
      const data = {}
      data['business_id'] = app.$route.params.id
      data['state_id'] = id
      getEditState(data).then(res => {
        app.stateForm = res.result.data
        app.stateForm['business_id'] = data['business_id']
        app.stateForm['state_id'] = data['state_id']
        this.stateVisible = true
      })
    },
    onSubmitState () {
      const app = this
      const form = app.stateForm
      const data = {}
      for (const k in form) {
        data['state[' + k + ']'] = form[k]
      }
      postEditState(form['business_id'], form['state_id'], data).then(res => {
        if (res.status === 0) {
          app.stateVisible = false
          app.$refs.stateTable.refresh(true)
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    },
    delMat (id) {
      const app = this
      app.$confirm({
        title: '是否删除业务材料',
        onOk: () => {
          delMat(id).then(res => {
            app.$refs.matTable.refresh(true)
          })
        }
      })
    },
    delState (id) {
      const app = this
      app.$confirm({
        title: '是否删除业务材料',
        onOk: () => {
          delState(id).then(res => {
            app.$refs.stateTable.refresh(true)
          })
        }
      })
    },
    saveEdit () {
      const app = this
      const id = this.$route.params.id
      const form = app.businessForm
      const roles = app.defaultRole
      const data = {}
      for (const k in form) {
        data['Business[' + k + ']'] = form[k]
      }
      for (const k in roles) {
        data['Business[roles][' + k + ']'] = roles[k]
      }
      postDesignBusiness(id, data).then(res => {
        if (res.status === 0) {
          app.getEdit(id)
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    }
  }
}
</script>

<style scoped>
  /deep/ .ant-form-item {
    margin-bottom: 10px
  }
</style>
